<template>
  <section class="panel">
    <div class="tab-bar">
      <div class="tab-buttons">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        :class="['tab-btn', { active: tab.key === activeKey }]"
        @click="activeKey = tab.key"
      >
        {{ tab.label }}
      </button>
      </div>
    </div>
    <div class="tab-content">
      <template v-if="activeTab.key === 'violation'">
        <div class="chart-container">
        <div class="chart-grid">
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getViolationOption(0)" :height="160" />
            </div>
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getViolationOption(1)" :height="160" />
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="activeTab.key === 'device'">
        <div class="chart-container">
        <div class="chart-grid">
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getDeviceOption(0)" :height="160" />
            </div>
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getDeviceOption(1)" :height="160" />
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="activeTab.key === 'permit'">
        <div class="chart-container">
        <div class="chart-grid">
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getPermitOption(0)" :height="160" />
            </div>
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getPermitOption(1)" :height="160" />
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="chart-container">
        <div class="chart-grid">
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getExamOption(0)" :height="160" />
            </div>
            <div class="chart-item">
              <div class="chart-time-buttons">
                <button
                  v-for="period in timePeriods"
                  :key="period.key"
                  :class="['time-btn', { active: period.key === activePeriod }]"
                  @click="activePeriod = period.key"
                >
                  {{ period.label }}
                </button>
              </div>
              <BaseChart :option="getExamOption(1)" :height="160" />
            </div>
          </div>
        </div>
      </template>
    </div>
  </section>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import BaseChart from './BaseChart.vue'

const timePeriods = reactive([
  { key: 'day', label: '日' },
  { key: 'week', label: '周' },
  { key: 'month', label: '月' }
])

const activePeriod = ref('day')

const tabs = reactive([
  {
    key: 'violation',
    label: '违规分析'
  },
  {
    key: 'device',
    label: '设备分析'
  },
  {
    key: 'permit',
    label: '许可分析'
  },
  {
    key: 'exam',
    label: '考试分析'
  }
])

const activeKey = ref(tabs[0].key)
const activeTab = computed(() => tabs.find(tab => tab.key === activeKey.value) ?? tabs[0])

// 违规分析数据
const violationData = {
  day: {
    chart1: {
      title: { text: '违规数量（日）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['违规数量'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '违规数量', type: 'line', smooth: true, data: [2, 1, 4, 3, 2, 1], lineStyle: { color: '#33e6ff' } }
      ]
    },
    chart2: {
      title: { text: '违规区域（日）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, textStyle: { color: '#9ddcff' } },
      series: [
        {
          type: 'pie',
          radius: ['35%', '60%'],
          data: [
            { name: 'B04车间', value: 12 },
            { name: 'C07车间', value: 8 },
            { name: '堆放场', value: 5 },
            { name: '动火区域', value: 3 },
            { name: '公共区域', value: 2 }
          ],
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 156, 255, 0.35)'
          },
          label: { color: '#d4efff' }
        }
      ]
    }
  },
  week: {
    chart1: {
      title: { text: '违规数量（周）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['违规数量'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '违规数量', type: 'line', smooth: true, data: [15, 12, 18, 14, 16, 8, 6], lineStyle: { color: '#33e6ff' } }
      ]
    },
    chart2: {
      title: { text: '违规区域（周）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, textStyle: { color: '#9ddcff' } },
      series: [
        {
          type: 'pie',
          radius: ['35%', '60%'],
          data: [
            { name: 'B04车间', value: 25 },
            { name: 'C07车间', value: 18 },
            { name: '堆放场', value: 12 },
            { name: '动火区域', value: 8 },
            { name: '公共区域', value: 6 }
          ],
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 156, 255, 0.35)'
          },
          label: { color: '#d4efff' }
        }
      ]
    }
  },
  month: {
    chart1: {
      title: { text: '违规数量（月）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['违规数量'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '违规数量', type: 'bar', data: [45, 38, 52, 41, 48, 35, 29], itemStyle: { color: '#2a9dff' } }
      ]
    },
    chart2: {
      title: { text: '违规区域（月）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, textStyle: { color: '#9ddcff' } },
      series: [
        {
          type: 'pie',
          radius: ['35%', '60%'],
          data: [
            { name: 'B04车间', value: 45 },
            { name: 'C07车间', value: 26 },
            { name: '堆放场', value: 18 },
            { name: '动火区域', value: 14 },
            { name: '公共区域', value: 9 }
          ],
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 156, 255, 0.35)'
          },
          label: { color: '#d4efff' }
        }
      ]
    }
  }
}

// 获取违规分析图表选项
const getViolationOption = (index) => {
  return violationData[activePeriod.value][`chart${index + 1}`]
}

// 设备分析数据
const deviceData = {
  day: {
    chart1: {
      title: { text: '设备运行时长（日）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['行车', '拆装架', '大泵', '烤箱'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['00:00', '06:00', '12:00', '18:00'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '行车', type: 'bar', data: [2.1, 1.8, 1.9, 0.4], itemStyle: { color: '#39d5ff' } },
        { name: '拆装架', type: 'bar', data: [1.2, 1.5, 1.3, 0.1], itemStyle: { color: '#4ce6a0' } },
        { name: '大泵', type: 'bar', data: [0.3, 0.2, 0.2, 0.1], itemStyle: { color: '#ffc857' } },
        { name: '烤箱', type: 'bar', data: [0.8, 0.9, 0.6, 0.1], itemStyle: { color: '#ff7b7b' } }
      ]
    },
    chart2: {
      title: { text: '设备在线率监测', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      radar: {
        indicator: [
          { name: '监控设备', max: 100 },
          { name: '物联传感', max: 100 },
          { name: '安全栅', max: 100 },
          { name: '边缘网关', max: 100 },
          { name: '门禁设备', max: 100 }
        ],
        splitLine: { lineStyle: { color: 'rgba(61, 183, 255, 0.35)' } },
        splitArea: { areaStyle: { color: ['rgba(30,108,168,0.25)', 'rgba(12,78,128,0.15)'] } },
        axisLine: { lineStyle: { color: 'rgba(61, 183, 255, 0.35)' } }
      },
      series: [
        {
          type: 'radar',
          data: [
            { value: [98, 95, 97, 92, 94], name: '在线率%', areaStyle: { color: 'rgba(53, 233, 255, 0.35)' } }
          ],
          lineStyle: { color: '#35e9ff' },
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: { color: '#35e9ff' }
        }
      ]
    }
  },
  week: {
    chart1: {
      title: { text: '设备运行时长（周）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['行车', '拆装架', '大泵', '烤箱'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '行车', type: 'bar', data: [14.2, 15.8, 13.9, 16.4, 15.2, 8.6, 6.4], itemStyle: { color: '#39d5ff' } },
        { name: '拆装架', type: 'bar', data: [9.1, 10.5, 8.3, 11.1, 9.8, 5.2, 3.8], itemStyle: { color: '#4ce6a0' } },
        { name: '大泵', type: 'bar', data: [2.3, 1.8, 2.4, 1.9, 2.1, 1.2, 0.8], itemStyle: { color: '#ffc857' } },
        { name: '烤箱', type: 'bar', data: [5.6, 6.2, 4.8, 6.8, 5.9, 3.1, 2.4], itemStyle: { color: '#ff7b7b' } }
      ]
    },
    chart2: {
      title: { text: '设备在线率监测', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      radar: {
        indicator: [
          { name: '监控设备', max: 100 },
          { name: '物联传感', max: 100 },
          { name: '安全栅', max: 100 },
          { name: '边缘网关', max: 100 },
          { name: '门禁设备', max: 100 }
        ],
        splitLine: { lineStyle: { color: 'rgba(61, 183, 255, 0.35)' } },
        splitArea: { areaStyle: { color: ['rgba(30,108,168,0.25)', 'rgba(12,78,128,0.15)'] } },
        axisLine: { lineStyle: { color: 'rgba(61, 183, 255, 0.35)' } }
      },
      series: [
        {
          type: 'radar',
          data: [
            { value: [99, 96, 98, 94, 95], name: '在线率%', areaStyle: { color: 'rgba(53, 233, 255, 0.35)' } }
          ],
          lineStyle: { color: '#35e9ff' },
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: { color: '#35e9ff' }
        }
      ]
    }
  },
  month: {
    chart1: {
      title: { text: '设备运行时长（月）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['行车', '拆装架', '大泵', '烤箱'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['日', '周', '月'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '行车', type: 'bar', data: [6.2, 38, 168], itemStyle: { color: '#39d5ff' } },
        { name: '拆装架', type: 'bar', data: [4.1, 29, 132], itemStyle: { color: '#4ce6a0' } },
        { name: '大泵', type: 'bar', data: [0.8, 7, 42], itemStyle: { color: '#ffc857' } },
        { name: '烤箱', type: 'bar', data: [2.4, 16, 72], itemStyle: { color: '#ff7b7b' } }
      ]
    },
    chart2: {
      title: { text: '设备在线率监测', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      radar: {
        indicator: [
          { name: '监控设备', max: 100 },
          { name: '物联传感', max: 100 },
          { name: '安全栅', max: 100 },
          { name: '边缘网关', max: 100 },
          { name: '门禁设备', max: 100 }
        ],
        splitLine: { lineStyle: { color: 'rgba(61, 183, 255, 0.35)' } },
        splitArea: { areaStyle: { color: ['rgba(30,108,168,0.25)', 'rgba(12,78,128,0.15)'] } },
        axisLine: { lineStyle: { color: 'rgba(61, 183, 255, 0.35)' } }
      },
      series: [
        {
          type: 'radar',
          data: [
            { value: [99, 94, 96, 91, 93], name: '在线率%', areaStyle: { color: 'rgba(53, 233, 255, 0.35)' } }
          ],
          lineStyle: { color: '#35e9ff' },
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: { color: '#35e9ff' }
        }
      ]
    }
  }
}

const getDeviceOption = (index) => {
  return deviceData[activePeriod.value][`chart${index + 1}`]
}

// 许可分析数据
const permitData = {
  day: {
    chart1: {
      title: { text: '许可数量（日）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['动火', '受限空间', '临时用电', '高处作业'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['08:00', '12:00', '16:00', '20:00'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '动火', type: 'line', smooth: true, data: [1, 2, 1, 0], lineStyle: { color: '#ff7b7b' } },
        { name: '受限空间', type: 'line', smooth: true, data: [0, 1, 1, 0], lineStyle: { color: '#ffc857' } },
        { name: '临时用电', type: 'line', smooth: true, data: [2, 1, 2, 1], lineStyle: { color: '#39d5ff' } },
        { name: '高处作业', type: 'line', smooth: true, data: [0, 1, 0, 0], lineStyle: { color: '#4ce6a0' } }
      ]
    },
    chart2: {
      title: { text: '班组申请（日）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      grid: { top: 50, left: 50, right: 20, bottom: 30 },
      dataset: {
        source: [
          ['班组', '数量'],
          ['维保一班', 2],
          ['装配二班', 1],
          ['动保科', 1],
          ['外协团队', 0]
        ]
      },
      xAxis: { type: 'category', axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } } },
      yAxis: { axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } }, splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } } },
      series: [
        { type: 'bar', itemStyle: { color: '#39d5ff' } }
      ]
    }
  },
  week: {
    chart1: {
      title: { text: '许可数量（周）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['动火', '受限空间', '临时用电', '高处作业'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '动火', type: 'line', smooth: true, data: [3, 5, 4, 6, 7, 2, 1], lineStyle: { color: '#ff7b7b' } },
        { name: '受限空间', type: 'line', smooth: true, data: [1, 2, 3, 2, 3, 1, 0], lineStyle: { color: '#ffc857' } },
        { name: '临时用电', type: 'line', smooth: true, data: [4, 6, 5, 7, 8, 3, 2], lineStyle: { color: '#39d5ff' } },
        { name: '高处作业', type: 'line', smooth: true, data: [1, 2, 1, 3, 2, 1, 0], lineStyle: { color: '#4ce6a0' } }
      ]
    },
    chart2: {
      title: { text: '班组申请（周）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      grid: { top: 50, left: 50, right: 20, bottom: 30 },
      dataset: {
        source: [
          ['班组', '数量'],
          ['维保一班', 8],
          ['装配二班', 6],
          ['动保科', 5],
          ['外协团队', 3]
        ]
      },
      xAxis: { type: 'category', axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } } },
      yAxis: { axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } }, splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } } },
      series: [
        { type: 'bar', itemStyle: { color: '#39d5ff' } }
      ]
    }
  },
  month: {
    chart1: {
      title: { text: '许可数量日周月', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      legend: { data: ['动火', '受限空间', '临时用电', '高处作业'], textStyle: { color: '#9ddcff' } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: {
        type: 'category',
        data: ['日', '周', '月'],
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#8bc9ff' },
        axisLine: { lineStyle: { color: '#0a5f8f' } },
        splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } }
      },
      series: [
        { name: '动火', type: 'line', smooth: true, data: [3, 15, 62], lineStyle: { color: '#ff7b7b' } },
        { name: '受限空间', type: 'line', smooth: true, data: [2, 9, 38], lineStyle: { color: '#ffc857' } },
        { name: '临时用电', type: 'line', smooth: true, data: [4, 18, 72], lineStyle: { color: '#39d5ff' } },
        { name: '高处作业', type: 'line', smooth: true, data: [1, 6, 21], lineStyle: { color: '#4ce6a0' } }
      ]
    },
    chart2: {
      title: { text: '班组申请日周月', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'axis' },
      grid: { top: 50, left: 50, right: 20, bottom: 30 },
      dataset: {
        source: [
          ['班组', '日', '周', '月'],
          ['维保一班', 2, 8, 24],
          ['装配二班', 1, 6, 18],
          ['动保科', 3, 12, 36],
          ['外协团队', 1, 5, 16]
        ]
      },
      xAxis: { type: 'category', axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } } },
      yAxis: { axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } }, splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } } },
      series: [
        { type: 'bar', itemStyle: { color: '#39d5ff' } },
        { type: 'bar', itemStyle: { color: '#ffc857' } },
        { type: 'bar', itemStyle: { color: '#4ce6a0' } }
      ]
    }
  }
}

const getPermitOption = (index) => {
  return permitData[activePeriod.value][`chart${index + 1}`]
}

// 考试分析数据
const examData = {
  day: {
    chart1: {
      title: { text: '考试人次（日）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: { type: 'category', data: ['上午', '下午'], axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } } },
      yAxis: { type: 'value', max: 50, axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } }, splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } } },
      series: [
        {
          type: 'bar',
          data: [25, 35],
          itemStyle: { color: '#39d5ff' },
          label: { show: true, position: 'top', color: '#d4efff' }
        }
      ]
    },
    chart2: {
      title: { text: '班组考试情况（日）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, textStyle: { color: '#9ddcff' } },
      series: [
        {
          name: '已考试占比',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['30%', '55%'],
          data: [
            { name: '维保一班', value: 85 },
            { name: '装配二班', value: 78 },
            { name: '动保科', value: 92 },
            { name: '外协团队', value: 65 }
          ],
          label: { color: '#d4efff' }
        },
        {
          name: '考试通过率',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['75%', '55%'],
          data: [
            { name: '维保一班', value: 96 },
            { name: '装配二班', value: 90 },
            { name: '动保科', value: 94 },
            { name: '外协团队', value: 82 }
          ],
          label: { color: '#d4efff' }
        }
      ]
    }
  },
  week: {
    chart1: {
      title: { text: '考试人次（周）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五'], axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } } },
      yAxis: { type: 'value', max: 200, axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } }, splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } } },
      series: [
        {
          type: 'bar',
          data: [45, 52, 38, 48, 41],
          itemStyle: { color: '#39d5ff' },
          label: { show: true, position: 'top', color: '#d4efff' }
        }
      ]
    },
    chart2: {
      title: { text: '班组考试情况（周）', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, textStyle: { color: '#9ddcff' } },
      series: [
        {
          name: '已考试占比',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['30%', '55%'],
          data: [
            { name: '维保一班', value: 88 },
            { name: '装配二班', value: 82 },
            { name: '动保科', value: 95 },
            { name: '外协团队', value: 72 }
          ],
          label: { color: '#d4efff' }
        },
        {
          name: '考试通过率',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['75%', '55%'],
          data: [
            { name: '维保一班', value: 97 },
            { name: '装配二班', value: 91 },
            { name: '动保科', value: 95 },
            { name: '外协团队', value: 85 }
          ],
          label: { color: '#d4efff' }
        }
      ]
    }
  },
  month: {
    chart1: {
      title: { text: '考试人次上限对比', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      grid: { top: 50, left: 40, right: 20, bottom: 30 },
      xAxis: { type: 'category', data: ['日', '周', '月'], axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } } },
      yAxis: { type: 'value', max: 800, axisLabel: { color: '#8bc9ff' }, axisLine: { lineStyle: { color: '#0a5f8f' } }, splitLine: { lineStyle: { color: 'rgba(20,90,140,0.3)' } } },
      series: [
        {
          type: 'bar',
          data: [120, 540, 1680],
          itemStyle: { color: '#39d5ff' },
          label: { show: true, position: 'top', color: '#d4efff' }
        }
      ]
    },
    chart2: {
      title: { text: '班组考试占比与通过率', left: 'center', textStyle: { color: '#8ee5ff', fontSize: 14 } },
      tooltip: { trigger: 'item' },
      legend: { bottom: 0, textStyle: { color: '#9ddcff' } },
      series: [
        {
          name: '已考试占比',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['30%', '55%'],
          data: [
            { name: '维保一班', value: 82 },
            { name: '装配二班', value: 74 },
            { name: '动保科', value: 91 },
            { name: '外协团队', value: 63 }
          ],
          label: { color: '#d4efff' }
        },
        {
          name: '考试通过率',
          type: 'pie',
          radius: ['30%', '55%'],
          center: ['75%', '55%'],
          data: [
            { name: '维保一班', value: 96 },
            { name: '装配二班', value: 88 },
            { name: '动保科', value: 92 },
            { name: '外协团队', value: 81 }
          ],
          label: { color: '#d4efff' }
        }
      ]
    }
  }
}

const getExamOption = (index) => {
  return examData[activePeriod.value][`chart${index + 1}`]
}
</script>

<style scoped>
.panel {
  padding: 0px 24px 20px;
  border-radius: 16px;
  border: 1px solid rgba(19, 132, 205, 0.4);
  background: linear-gradient(180deg, rgba(3, 31, 58, 0.85), rgba(1, 19, 32, 0.95));
  box-shadow: inset 0 0 36px rgba(0, 162, 255, 0.18);
  display: grid;
  grid-template-rows: auto 1fr;
  /* gap: 16px; */
}

.tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 6px;
}

.tab-buttons {
  display: flex;
  gap: 12px;
}

.time-buttons {
  display: flex;
  gap: 8px;
}

.tab-btn {
  height: 30px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(31, 171, 255, 0.4);
  background: rgba(11, 48, 83, 0.6);
  color: rgba(160, 218, 255, 0.75);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-btn.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(45, 198, 255, 0.85), rgba(17, 95, 255, 0.85));
  box-shadow: 0 0 16px rgba(32, 173, 255, 0.45);
}

.time-btn {
  height: 24px;
  padding: 2px 8px;
  border: none;
  background: none;
  color: rgba(160, 218, 255, 0.7);
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.time-btn:hover {
  color: rgba(160, 218, 255, 0.9);
}

.time-btn.active {
  color: #4ce6ff;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(76, 230, 255, 0.6);
}

.tab-content {
  overflow: hidden;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-item {
  /* display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(5, 53, 87, 0.45);
  border-radius: 12px;
  border: 1px solid rgba(32, 173, 255, 0.2);
  padding: 12px; */
}

.chart-time-buttons {
  display: flex;
  float: right;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 1680px) {
  .chart-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
</style>

